<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol {
            list-style-type: none;
        }


        .box {
            display: inline-block;

            & h1 {
                width: 600px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                margin: 20px 0;
            }

            & ul {
                width: 600px;
                height: 600px;
                display: flex;
                flex-flow: wrap;
                border: 1px solid;
                justify-content: center;
                align-items: center;


                & li {
                    height: 150px;
                    width: 150px;
                    border-radius: 50%;
                    background-color: black;
                    margin: 0 20px;
                    box-shadow: 0 0 11px 8px;
                    user-select: none;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    & img {
                        object-fit: cover;
                        width: 170px;
                        height: 170px;
                        border-radius: 50%;
                        transform: rotateZ(0);
                        scale: 0;
                        animation: a 1s;
                        display: none;
                    }
                }
            }

            span {
                display: inline-block;

            }
        }


        .box2 {
            display: inline-block;

            & h1 {
                width: 600px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                position: absolute;
                top: 20px;
            }
        }

        button {
            width: 100px;
            height: 50px;

        }

        .box2 ol {
            width: 500px;
            display: flex;
            flex-flow: wrap;
            position: absolute;
            top: 100px;

            & li {
                & img {
                    width: 100px;
                    height: 100px;
                    object-fit: cover;
                }
            }

        }

        @keyframes a {
            0% {
                scale: 0;
                transform: rotateZ(0deg);
            }
            50% {
                scale: 1;
                transform: rotateZ(360deg);
            }
            100% {
                scale: 0;
                transform: rotateZ(0deg);

            }

        }
    </style>

</head>
<body>
<div class="box">
    <h1>打地鼠
        <button>开始游戏</button>
    </h1>
    <ul>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
        <li><img src=""></li>
    </ul>
</div>
<div class="box2">
    <h1>缉拿归案</h1>
    <ol></ol>
</div>
<script>
    let srcImg = ["../images/a1.jpg",
        "../images/a2.jpg",
        "../images/a3.jpg",
        "../images/a4.jpg",
        "../images/a5.jpg",
        "../images/a6.jpg",
        "../images/3.jpg",
        "../images/4.jpg",
        "../images/5.jpg"]
    let aImg = document.querySelectorAll('.box ul li img')
    let but = document.querySelector('button')
    let aLi = document.querySelectorAll('.box ul li')
    let oLi = document.querySelector('.box2 ol')
    let oul = document.querySelector('.box ul')
    let len = aImg.length
    let ranImg, numRandom, num = 0
    let falg=true

    if(falg){
        but.addEventListener('click', () => {
            falg=false
            console.log('aa')
            oul.onclick=function (){
                num++
                console.log('a')
                if (num >= len) {
                    but.innerHTML = '继续投币玩'
                    alert('游戏结束')

                }
            }

            //只需要获取一次随机数组
            //弹出图片的功能
            ranImg = randomArr(len, 0, len - 1)
            for (let i = 0; i < len; i++) {
                //每循环一次获取一个随机
                let setTime = setTimeout(function () {
                    numRandom = randomNumber(0, 8)
                    aImg[ranImg[i]].src = srcImg[numRandom]
                    aImg[ranImg[i]].style.display = 'block'
                }, 1000 * i + 500)
                // clearTimeout(setTime)
                //图片不可被拖动
                aImg[i].draggable = false;
                //防抖
                aImg[i].addEventListener('click', debounce(() => {
                    let li = document.createElement('li')
                    let liImg = document.createElement('img')
                    li.appendChild(liImg);
                    oLi.appendChild(li);
                    liImg.src = srcImg[numRandom]
                }, 1000))
            }
        })
    }




    // 获取 父节点   parentNode
    // 获取 子节点  childNodes
    // 获取 子元素节点    children
    // 第一个子节点 firstChild
    // 最后一个子节点  lastChild
    // 第一个子元素节点    firstElementChild
    // 最后一个子元素节点  lastElementChild
    // 下一个兄弟节点 nextSibling
    // 上一个兄弟节点 previousSibling
    // 下一个兄弟元素节点 nextElementSibling
    // 上一个兄弟元素节点 previousElementSibling


    //在min到max随机取一个数
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }

    //如果数组存在同一个值就返回true
    function equalArr(arr, num) {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] === num) {
                return true
            }
        }
        return false
    }

    //在min-max范围内不能重复的随机取一个数，一共取n个，返回装着这n个数的数组
    function randomArr(n, min, max) {
        let arr = []
        if (n > max - min + 1) return
        for (let i = 0; i < n; i++) {
            let random = randomNumber(min, max)
            equalArr(arr, random) ? i-- : arr[i] = random
        }
        return arr
    }

    //防抖
    function debounce(fn, wait) {
        let timer;
        return function (e) {
            if (!timer) fn.call(this, e)
            clearTimeout(timer)
            timer = setTimeout(function () {
                timer = null
            }, wait)
        }
    }
</script>
</body>
</html>